<template>
      <div class="wrapper" ref="wrapper">
        <div>
            <div class="box">
                <div class="tit">当前城市</div>
                <ul class="btn_list">
                   <li><div class="btn">{{this.$store.state.city}}</div></li>
                </ul>
            </div>
            <div class="box">
              <div class="tit">热门城市</div>
              <ul class="btn_list">
                <li v-for="(item,index) in hotCity" :key="item.id">
                   <div
                     class="btn"
                     @click="handleCityClick(item.name)"
                   >{{item.name}}</div>
                </li>
              </ul>
            </div>
            <!--ABC -->
            <div class="box"
                 v-for="(item,key) in cities"
                 :key="key"
                 :ref="key"
            >
              <div class="tit">{{key}}</div>
              <ul class="list_city">
                <li
                  v-for="(item,index) in item"
                  @click="handleCityClick(item.name)"
                >{{item.name}}</li>
              </ul>
            </div>
        </div>
      </div>
</template>

<script>
  //使用scroll
  import Bscroll from 'better-scroll'
    export default {
        name: "List",
        props:{//接受参数
           hotCity:Array,
           cities:Object,
           letter:String   //接受传递过来的字母
        },
        methods:{
          handleCityClick (city) {//点击热门城市
               this.$store.commit("changeCity",city);
               this.$router.push("/");//编程式路由
          }
        },
        mounted () {//生命周期钩子函数  页面加载完毕
          this.scroll=new Bscroll(this.$refs.wrapper);
        },
        watch :{//监听
          letter () {
              if(this.letter){//如果letter有值
                 // console.log("list页面letter："+this.letter)
                // 跳转
                  const element=this.$refs[this.letter][0];//找到要跳转的节点
                  this.scroll.scrollToElement(element);//跳转到指定位置
              }
          }
        }

    }
</script>

<style  lang="stylus" scoped>
   .wrapper{
       position:absolute;
       width: 100%
       left:0;top:.8rem;bottom:0;
       overflow :hidden
      .box{
        .tit{
           background :#eaeaea;
           padding-left :.1rem;
           line-height :.3rem;
           color:#666;
           border-bottom :1px solid #ccc;
        }
        .btn_list{
          overflow:hidden;
          padding:.05rem .3rem .05rem .05rem;
          box-sizing :border-box;
          li{
            width:33.3%;
            float:left;
            div{
              text-align:center;
              margin:.05rem;
              border:.01rem solid #ccc;
              border-radius:.03rem;
              padding:.05rem 0;
            }
          }
        }
        .list_city{
            li{
               line-height :.28rem;
               padding-left:.1rem;
               color:#666;
               border-bottom:1px solid #cccccc;
            }
        }
      }
   }
</style>
